<template>
    <div class="container">
        <div class="lucky-wheel">
            <div class="lucky-title"></div>
            <div class="wheel-main">
                <div class="wheel-pointer" @click="beginRotate()"></div>
                <div class="wheel-bg" :style="rotateStyle">
                    <div class="prize-list">
                        <div class="prize-item"
                             v-for="(item,index) in prizeList"
                             :key="index"
                             :style="item.style">
                            <div class="prize-pic">
                                <img :src="item.icon"/>
                            </div>
                            <div class="prize-type">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="main-bg"></div>
            <div class="bg-p"></div>
            <div class="content">
                <div class="count">您的可抽奖次数： {{ count}}</div>
            </div>
            <div class="tip">
                <div class="tip-title">活动规则</div>
                <div class="tip-content">
                    <p>1.任意会员推荐体验会员可获得二次抽奖机会。</p>
                    <p>2.抽奖可获得余额为5-100元。</p>
                    <p>3.最终解释权归上海摩城化妆品有限公司所有。</p>
                </div>
            </div>
        </div>
        <div class="toast" v-show="prize">
            <div class="toast-container">
                <!-- <img :src="toastIcon" class="toast-picture" /> -->
                <div class="close" @click="closeToast()"></div>
                <div class="toast-title">{{toastTitle}}</div>
                <div class="toast-btn">
                    <div class="toast-cancel" @click="closeToast">关闭</div>
                </div>
            </div>
        </div>
        <div class="toast-mask" v-show="prize"></div>
    </div>
</template>
<script>
    import {prizeList} from "../../assets/config";
    import api from "@/utils/restful";

    const CIRCLE_ANGLE = 360;

    const config = {
        // 总旋转时间
        duration: 4000,
        // 旋转圈数
        circle: 8,
        mode: "ease-in-out"
    };

    export default {
        data() {
            return {
                count: 10, // 剩余抽奖次数
                duration: 3000, // 转盘旋转时间
                prizeList: [],
                rotateAngle: 0, // 旋转角度
                index: 0,
                prize: null,
                list: [],
                prizeId: 0
            };
        },
        created() {
            // 初始化一些值
            this.angleList = [];
            // 是否正在旋转
            this.isRotating = false;
            // 基本配置
            this.config = config;
            this.getPrizeList();
            this.getPrizeNum();
            // 获取奖品列表
            this.initPrizeList();
        },
        computed: {
            rotateStyle() {
                return `
        -webkit-transition: transform ${this.config.duration}ms ${this.config.mode};
        transition: transform ${this.config.duration}ms ${this.config.mode};
        -webkit-transform: rotate(${this.rotateAngle}deg);
            transform: rotate(${this.rotateAngle}deg);`;
            },
            toastTitle() {
                return this.prize && this.prize.isPrize === 1
                    ? "恭喜您，获得" + this.prize.name
                    : "未中奖";
            },
            toastIcon() {
                return this.prize && this.prize.isPrize === 1
                    ? require("../../assets/imgList/congratulation.png")
                    : require("../../assets/imgList/sorry.png");
            }
        },
        methods: {
            initPrizeList() {
                // 这里可以发起请求，从服务端获取奖品列表
                // 这里使用模拟数据


            },

            getPrizeNum() {
                this.$axios({
                    method: "get",
                    url: api.prizeNum,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res.data);
                    this.count = res.data;
                });
            },
            getPrizeList() {
                this.$axios({
                    method: "get",
                    url: api.getPrizeList,
                }).then(res => {
                    this.list = res.data;
                    //console.log(this.list);
                    this.prizeList = this.formatPrizeList(this.list);
                });
            },
            // 格式化奖品列表，计算每个奖品的位置
            formatPrizeList(list) {
                // 记录每个奖的位置
                const angleList = [];

                const l = list.length;

                console.log(l);
                // 计算单个奖项所占的角度
                const average = CIRCLE_ANGLE / l;

                const half = average / 2;

                // 循环计算给每个奖项添加style属性
                list.forEach((item, i) => {
                    // 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2
                    const angle = -(i * average + half);
                    // 增加 style
                    item.style = `-webkit-transform: rotate(${angle}deg);
                      transform: rotate(${angle}deg);`;

                    // 记录每个奖项的角度范围
                    angleList.push(i * average + half);
                });

                this.angleList = angleList;

                return list;
            },
            beginRotate() {
                // 添加次数校验
                if (this.count === 0) return;
                this.doPrize();

                // 开始抽奖
                // 这里这里向服务端发起请求，得到要获得的奖

                // 可以返回下标，也可以返回奖品 id，通过查询 奖品列表，最终得到下标

                // 随机获取下标
                // this.index = this.random(this.prizeList.length - 1);

                // 减少剩余抽奖次数
                // this.count--;

                // 开始旋转
                // this.rotating();
            },
            doPrize() {
                this.$axios({
                    method: "get",
                    url: api.doPrize,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res.data);
                    let index = 0;
                    this.prizeId = res.data.id;
                    console.log(this.prizeId, res.data.id);
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].prizeId == this.prizeId) {
                            index = i;
                            console.log("当前下标", index);
                        }
                    }
                    this.index = index;
                    this.count--;
                    this.rotating();
                });
            },
            random(max, min = 0) {
                return parseInt(Math.random() * (max - min + 1) + min);
            },
            rotating() {
                const {isRotating, angleList, config, rotateAngle, index} = this;

                if (isRotating) return;

                this.isRotating = true;

                // 计算角度
                const angle =
                    // 初始角度
                    rotateAngle +
                    // 多旋转的圈数
                    config.circle * CIRCLE_ANGLE +
                    // 奖项的角度
                    angleList[index] -
                    (rotateAngle % CIRCLE_ANGLE);

                this.rotateAngle = angle;

                // 旋转结束后，允许再次触发
                setTimeout(() => {
                    this.rotateOver();
                }, config.duration + 1000);
            },
            rotateOver() {
                this.isRotating = false;

                this.prize = this.list[this.index];
                console.log(this.prize, this.index);

                // console.log(this.prize, this.index);
            },
            //关闭弹窗
            closeToast() {
                this.prize = null;
            }
        }
    };
</script>
<style scoped>
    .container {
        width: 100%;
    }

    .lucky-wheel {
        width: 100%;
        background: rgb(252, 207, 133) url("../../assets/imgList/prize_bg.jpg") no-repeat center bottom;
        background-size: 100%;
        padding-top: 20px;
    }

    .lucky-title {
        width: 100%;
        height: 130px;
        background: url("../../assets/imgList/lucky_title.png") no-repeat center top;
        background-size: 100%;
    }

    .wheel-main {
        margin: 0 auto;
        position: relative;
        width: 295px;
        height: 295px;
    }

    .wheel-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: url("../../assets/imgList/draw_wheel.png") no-repeat center top;
        background-size: 100%;
        color: #fff;
    }

    .wheel-pointer {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 85px;
        height: 85px;
        background: url("../../assets/imgList/draw_btn.png") no-repeat center top;
        background-size: 100%;
        transform: translate3d(-50%, -50%, 0);
    }

    .wheel-bg div {
        text-align: center;
    }

    .prize-list {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .prize-list .prize-item {
        position: absolute;
        width: 95px;
        height: 150px;
        top: 0;
        left: 50%;
        margin-left: -47.5px;
        transform-origin: 50% 100%;
    }

    .prize-pic img {
        width: 60px;
        height: 60px;
        margin-top: 15px;
    }

    .prize-count {
        font-size: 14px;
    }

    .prize-type {
        font-size: 12px;
    }

    .main {
        position: relative;
        width: 100%;
        min-height: 228px;
        background: rgb(145, 18, 37);
        padding-bottom: 27px;
    }

    /*.main-bg {*/
    /*    width: 100%;*/
    /*    height: 105px;*/
    /*    position: absolute;*/
    /*    top: -55px;*/
    /*    left: 0;*/
    /*    background: url("../../assets/imgList/luck_bg.png") no-repeat center top;*/
    /*    background-size: 100%;*/
    /*}*/

    .bg-p {
        width: 100%;
        height: 47px;
        background: rgb(145, 18, 37);
    }

    .content {
        position: absolute;
        top: 3px;
        left: 0;
        background: rgb(145, 18, 37);
        width: 100%;
        height: 83px;
        font-size: 18px;
        color: #ffeb39;
        padding-left: 100px;
    }

    .content div {
        text-align: left;
    }

    .tip {
        position: relative;
        margin: 40px auto 0;
        width: 300px;
        border: 1px solid #fbc27f;
    }

    .tip-title {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 16px;
        color: #fccc6e;
        background: rgb(243, 109, 86);
        padding: 5px 10px;
    }

    .tip-content {
        padding: 25px 10px;
        font-size: 14px;
        color: #fff8c5;
        line-height: 1.5;
    }

    .toast-mask {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
        width: 100%;
        height: 100%;
    }

    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 20000;
        transform: translate(-50%, -50%);
        width: 300px;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        background-color: rgb(252, 244, 224);
    }

    .toast-container {
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px dotted #fccc6e;
    }

    /* .toast-picture {
      position: absolute;
      top: 100px;
      left: -25px;
      width: 300px;
      height: 130px;
    }
    .toast-pictrue-change {
      position: absolute;
      top: -1.5rem;
      left: -1.375rem;
      width: 17.5rem;
      height: 3.125rem;
    } */
    .toast-title {
        padding: 40px 0;
        font-size: 18px;
        color: #fc7939;
        text-align: center;
    }

    .toast-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .toast-cancel {
        font-size: 18px;
    }

    .toast-btn div {
        background-image: -moz-linear-gradient(
                -18deg,
                rgb(242, 148, 85) 0%,
                rgb(252, 124, 88) 51%,
                rgb(252, 124, 88) 99%
        );

        background-image: -ms-linear-gradient(
                -18deg,
                rgb(242, 148, 85) 0%,
                rgb(252, 124, 88) 51%,
                rgb(252, 124, 88) 99%
        );
        background-image: -webkit-linear-gradient(
                -18deg,
                rgb(242, 148, 85) 0%,
                rgb(252, 124, 88) 51%,
                rgb(252, 124, 88) 99%
        );
        box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
        width: 70px;
        height: 30px;
        border-radius: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }

    .close {
        position: absolute;
        top: -15px;
        right: -15px;
        width: 32px;
        height: 32px;
        background: url("../../assets/imgList/close_store.png") no-repeat center top;
        background-size: 100%;
    }
</style>

